<template>
  <view>
    <view class="cu-custom" :style="[{ height: CustomBar + 'px' }]">
      <view
        class="cu-bar fixed"
        :style="style"
        :class="[bgImage != '' ? 'none-bg text-white bg-img' : '', bgColor]"
      >
        <view class="action" @tap="BackPage" v-if="isBack">
          <text class="cuIcon-back"></text>
          <slot name="backText"></slot>
        </view>
        <view class="content action">
          <slot name="content"></slot>
        </view>
        <slot name="right"></slot>
      </view>
      <image
        :src="bgImage"
        class="postyle"
        :style="[{ height: CustomBar + 'px' }]"
      >
        <view
          class="topArea flex align-center"
          :style="topAreaStyle"
          v-if="topTitle"
        >
          <view class="isBack" v-if="needBack" @tap="BackPage">
            <u-icon
              name="arrow-left"
              :color="backIconColor"
              :size="backIconSize"
            ></u-icon>
          </view>
          <view :class="titleClass">{{ topTitle }}</view>
        </view>
        <view v-if="showStreet">
          <view class="topArea flex align-center" @click="showStreetList">
            <view>{{ street }}</view>
            <view class="ml_10">
              <u-icon
                v-if="!ifShow"
                name="arrow-down"
                color="#FFFFFF"
                size="20"
              ></u-icon>
              <u-icon v-else name="arrow-up" color="#FFFFFF" size="20"></u-icon>
            </view>
          </view>
          <view class="searchAdviceList" :hidden="!ifShow">
            <scroll-view style="height: 100%" scroll-y>
              <view class="fc_333 fz_32 font_weight">已开通服务街道</view>
              <view class="search_tag_block mt_10">
                <view
                  class="select_tag mt_20"
                  :class="{ select_tag_checked: item.deptName == street }"
                  v-for="(item, index) in showList"
                  :key="index"
                  @click="chooseStreet(item, index)"
                  >{{ item.deptName }}</view
                >
              </view>
            </scroll-view>
          </view>
        </view>
      </image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      StatusBar: this.StatusBar,
      CustomBar: this.CustomBar,
      ifShow: false,
      street: '安镇街道'
    };
  },
  name: 'cu-custom',
  computed: {
    style() {
      var StatusBar = this.StatusBar;
      var CustomBar = this.CustomBar;
      var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
      return style;
    },
    topAreaStyle() {
      let custom = wx.getMenuButtonBoundingClientRect();
      return `top:${custom.top}px`;
    }
  },
  props: {
    needBack: {
      type: Boolean,
      default: false
    },
    backIconSize: {
      type: String,
      default: '36'
    },
    backIconColor: {
      type: String,
      default: '#282A31'
    },
    topTitle: {
      type: String,
      default: ''
    },
    titleClass: {
      type: String,
      default: ''
    },
    bgColor: {
      type: String,
      default: ''
    },
    isBack: {
      type: [Boolean, String],
      default: false
    },
    bgImage: {
      type: String,
      default: ''
    },
    showList: {
      type: Array
      // default: ''
    },
    showStreet: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    BackPage() {
      uni.navigateBack({
        delta: 1
      });
    },
    showStreetList() {
      const that = this;
      that.ifShow = !that.ifShow;
    },
    chooseStreet(item, index) {
      const that = this;
      that.showList.map((val) => {
        if (val.deptName == item.deptName) {
          that.street = item.deptName;
        }
      });
      that.ifShow = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.postyle {
  position: fixed;
  width: 100%;
  top: 0rpx;
  left: 0rpx;
  z-index: 2;
  // background: #fff;
}
.topArea {
  position: fixed;
  // top: 100rpx;
  left: 30rpx;
  z-index: 3;
  color: #fff;
  font-size: 36rpx;
}
.searchAdviceList {
  position: absolute;
  background-color: #fff;
  top: 160rpx;
  left: 30rpx;
  right: 30rpx;
  font-size: 24rpx;
  padding: 20rpx;
  border: 1rpx solid #eee;
  border-radius: 10rpx;
  z-index: 999;
}
.search_tag_block {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: left;
  .select_tag {
    width: 30%;
    margin-right: 3%;
    height: 64rpx;
    line-height: 64rpx;
    text-align: center;
    background-color: #f1f1f1;
    border-radius: 4rpx;
    font-size: 28rpx;
    color: #999999;
  }
}
.select_tag_checked {
  background-color: #f9e5da !important;
  color: #ff622a !important;
}
.flex {
  display: flex;
}
.align-center {
  align-items: center;
}
.isBack {
  padding: 10rpx 18rpx 10rpx 0;
}
.commTitle {
  font-size: 34rpx;
  font-weight: 500;
  color: #282a31;
  padding: 10rpx 0;
}
.commTitleWhite {
  font-size: 34rpx;
  font-weight: 500;
  color: #fff;
  padding: 10rpx 0;
}
.white {
  color: #fff;
}
.bgWhite {
  background: #fff;
}
.bgNormal {
	background: linear-gradient(90deg, #4380FB, #5663F5);
}
</style>